<!--
 * @Author: yuanjunyi
 * @Date: 2024-02-28 10:29:51
 * @LastEditors: lg
 * @LastEditTime: 2024-03-07 10:20:12
 * @Description: this is description
-->
<template>
  <div
    class="part-problem"
    :style="`background: url(${imgUrl}install-apply-solution-whole.webp ) no-repeat center center; background-size: cover;`"
  >
    <!-- solution-bg.png -->
    <!--  <div>
      <div class="circle circle1">
        <div class="circle circle2">
          <div class="circle3"></div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
import { imgUrl } from "@/utils/common";
</script>
<style lang="scss" scoped>
.part-problem {
  height: 667px;
  display: flex;
  justify-content: center;
  align-items: center;
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .circle1 {
    width: 510px;
    height: 510px;
    box-shadow: 0px 4px 15px 4px rgba(96, 157, 249, 0.4);

    border: 1px solid #ffffff;
  }
  .circle2 {
    width: 472px;
    height: 472px;
    background: #e5f2ff;
    box-shadow: 0px 4px 15px 4px rgba(105, 172, 220, 0.25);
    border-radius: 50%;
    border: 1px solid #ffffff;
  }
  .circle3 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid;
    border-image: linear-gradient(
        360deg,
        rgba(199, 222, 253, 1),
        rgba(183, 223, 255, 0.24)
      )
      1 1;
  }
}
</style>
